<template>
	<div class="result_list">
		<div class="video_item" v-for="(item, index) in resultList" :key="index">
			<div class="top_con" :style="{backgroundImage: 'url('+item.bg_img+')'}">
				<div class="operate_con">
					<div class="left_check">
						<a-checkbox v-model:checked="checked">
							<span style="color: #fff;">选用</span>
						</a-checkbox>
					</div>
					<div class="right_duration">00:46</div>
				</div>
				<div class="composition_con">
					<div class="back_con">
						<div class="back_item" v-for="(back_item, back_index) in item.sceneList" :key="back_index">
							<img :src="back_item.img_url" alt="" />
						</div>
					</div>
					<div class="desc_con">
						<div class="desc_item" v-for="(props_item, props_index) in item.propsList" :key="props_index">
							<div class="left_label">{{props_item.label}}：</div>
							<div class="right_value">{{props_item.value}}</div>
						</div>
					</div>
				</div>
			</div>
			<div class="bottom_con">
				<div class="video_name">{{item.name}}</div>
				<div class="label_con">
					<div class="label_item" v-for="(label_item, label_key) in item.labelList" :key="label_key">
						<a-tag :color="label_item.color">{{label_item.name}}</a-tag>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		defineComponent,
		reactive,
		toRefs
	} from 'vue';
	export default defineComponent({
		setup(props, context) {
			const state = reactive({
				checked: false,
				resultList: [{
					name: 'zhinengjianji_1627773599',
					bg_img: 'https://vod.jukeyinqing.com/ims_output/videos/201/1672306223776313_201.mp4?x-oss-process=video/snapshot,t_1,f_png,m_fast,ar_auto,w_300',
					labelList: [{
						name: '推荐',
						color: 'orange'
					}, {
						name: '差异度大',
						color: 'blue'
					}, {
						name: '完全不重复',
						color: 'purple'
					}],
					sceneList: [{
						img_url: 'https://vod.jukeyinqing.com/s/20231204/material/mpmsjJ/png/e41bca63cdf868aa8db38bd35a796c18.png?x-oss-process=image/crop,x_597,y_0,w_608,h_1080/resize,w_27,limit_0'
					}, {
						img_url: 'https://vod.jukeyinqing.com/common/video/4ec727de8dbd4094954d6a9cb2ad177b.mp4?x-oss-process=video/snapshot,t_1,f_png,ar_auto,w_27'
					}, {
						img_url: 'https://vod.jukeyinqing.com/common/video/12a40b77e45a407ea9334bb5f5edc4ec.mp4?x-oss-process=video/snapshot,t_1,f_png,ar_auto,w_27'
					}, {
						img_url: 'https://vod.jukeyinqing.com/common/video/917c2e9c1b164668b68f060cd1faa723.mp4?x-oss-process=video/snapshot,t_1,f_png,ar_auto,w_27'
					}, {
						img_url: 'https://vod.jukeyinqing.com/common/video/4ec727de8dbd4094954d6a9cb2ad177b.mp4?x-oss-process=video/snapshot,t_1,f_png,ar_auto,w_27'
					}],
					propsList: [{
						label: '解说音频',
						value: '-'
					}, {
						label: '背景音乐',
						value: 'I Love You 3000 II'
					}]
				},{
					name: 'zhinengjianji_1627773599',
					bg_img: "https://vod.jukeyinqing.com/ims_output/videos/201/1672306224002371_201.mp4?x-oss-process=video/snapshot,t_1,f_png,m_fast,ar_auto,w_300",
					labelList: [{
						name: '推荐',
						color: 'orange'
					}, {
						name: '差异度大',
						color: 'blue'
					}, {
						name: '完全不重复',
						color: 'purple'
					}],
					sceneList: [{
						img_url: 'https://vod.jukeyinqing.com/s/20231204/material/mpmsjJ/png/e41bca63cdf868aa8db38bd35a796c18.png?x-oss-process=image/crop,x_597,y_0,w_608,h_1080/resize,w_27,limit_0'
					}, {
						img_url: 'https://vod.jukeyinqing.com/common/video/4ec727de8dbd4094954d6a9cb2ad177b.mp4?x-oss-process=video/snapshot,t_1,f_png,ar_auto,w_27'
					}, {
						img_url: 'https://vod.jukeyinqing.com/common/video/12a40b77e45a407ea9334bb5f5edc4ec.mp4?x-oss-process=video/snapshot,t_1,f_png,ar_auto,w_27'
					}, {
						img_url: 'https://vod.jukeyinqing.com/common/video/917c2e9c1b164668b68f060cd1faa723.mp4?x-oss-process=video/snapshot,t_1,f_png,ar_auto,w_27'
					}, {
						img_url: 'https://vod.jukeyinqing.com/common/video/4ec727de8dbd4094954d6a9cb2ad177b.mp4?x-oss-process=video/snapshot,t_1,f_png,ar_auto,w_27'
					}],
					propsList: [{
						label: '解说音频',
						value: '-'
					}, {
						label: '背景音乐',
						value: 'I Love You 3000 II'
					}]
				},{
					name: 'zhinengjianji_1627773599',
					bg_img: "https://vod.jukeyinqing.com/ims_output/videos/201/1672306225051124_201.mp4?x-oss-process=video/snapshot,t_1,f_png,m_fast,ar_auto,w_300",
					labelList: [{
						name: '推荐',
						color: 'orange'
					}, {
						name: '差异度大',
						color: 'blue'
					}, {
						name: '完全不重复',
						color: 'purple'
					}],
					sceneList: [{
						img_url: 'https://vod.jukeyinqing.com/s/20231204/material/mpmsjJ/png/e41bca63cdf868aa8db38bd35a796c18.png?x-oss-process=image/crop,x_597,y_0,w_608,h_1080/resize,w_27,limit_0'
					}, {
						img_url: 'https://vod.jukeyinqing.com/common/video/4ec727de8dbd4094954d6a9cb2ad177b.mp4?x-oss-process=video/snapshot,t_1,f_png,ar_auto,w_27'
					}, {
						img_url: 'https://vod.jukeyinqing.com/common/video/12a40b77e45a407ea9334bb5f5edc4ec.mp4?x-oss-process=video/snapshot,t_1,f_png,ar_auto,w_27'
					}, {
						img_url: 'https://vod.jukeyinqing.com/common/video/917c2e9c1b164668b68f060cd1faa723.mp4?x-oss-process=video/snapshot,t_1,f_png,ar_auto,w_27'
					}, {
						img_url: 'https://vod.jukeyinqing.com/common/video/4ec727de8dbd4094954d6a9cb2ad177b.mp4?x-oss-process=video/snapshot,t_1,f_png,ar_auto,w_27'
					}],
					propsList: [{
						label: '解说音频',
						value: '-'
					}, {
						label: '背景音乐',
						value: 'I Love You 3000 II'
					}]
				},{
					name: 'zhinengjianji_1627773599',
					bg_img: "https://vod.jukeyinqing.com/ims_output/videos/201/1672306227437047_201.mp4?x-oss-process=video/snapshot,t_1,f_png,m_fast,ar_auto,w_300",
					labelList: [{
						name: '推荐',
						color: 'orange'
					}, {
						name: '差异度大',
						color: 'blue'
					}, {
						name: '完全不重复',
						color: 'purple'
					}],
					sceneList: [{
						img_url: 'https://vod.jukeyinqing.com/s/20231204/material/mpmsjJ/png/e41bca63cdf868aa8db38bd35a796c18.png?x-oss-process=image/crop,x_597,y_0,w_608,h_1080/resize,w_27,limit_0'
					}, {
						img_url: 'https://vod.jukeyinqing.com/common/video/4ec727de8dbd4094954d6a9cb2ad177b.mp4?x-oss-process=video/snapshot,t_1,f_png,ar_auto,w_27'
					}, {
						img_url: 'https://vod.jukeyinqing.com/common/video/12a40b77e45a407ea9334bb5f5edc4ec.mp4?x-oss-process=video/snapshot,t_1,f_png,ar_auto,w_27'
					}, {
						img_url: 'https://vod.jukeyinqing.com/common/video/917c2e9c1b164668b68f060cd1faa723.mp4?x-oss-process=video/snapshot,t_1,f_png,ar_auto,w_27'
					}, {
						img_url: 'https://vod.jukeyinqing.com/common/video/4ec727de8dbd4094954d6a9cb2ad177b.mp4?x-oss-process=video/snapshot,t_1,f_png,ar_auto,w_27'
					}],
					propsList: [{
						label: '解说音频',
						value: '-'
					}, {
						label: '背景音乐',
						value: 'I Love You 3000 II'
					}]
				},{
					name: 'zhinengjianji_1627773599',
					bg_img: "https://vod.jukeyinqing.com/ims_output/videos/201/1672306227643366_201.mp4?x-oss-process=video/snapshot,t_1,f_png,m_fast,ar_auto,w_300",
					labelList: [{
						name: '推荐',
						color: 'orange'
					}, {
						name: '差异度大',
						color: 'blue'
					}, {
						name: '完全不重复',
						color: 'purple'
					}],
					sceneList: [{
						img_url: 'https://vod.jukeyinqing.com/s/20231204/material/mpmsjJ/png/e41bca63cdf868aa8db38bd35a796c18.png?x-oss-process=image/crop,x_597,y_0,w_608,h_1080/resize,w_27,limit_0'
					}, {
						img_url: 'https://vod.jukeyinqing.com/common/video/4ec727de8dbd4094954d6a9cb2ad177b.mp4?x-oss-process=video/snapshot,t_1,f_png,ar_auto,w_27'
					}, {
						img_url: 'https://vod.jukeyinqing.com/common/video/12a40b77e45a407ea9334bb5f5edc4ec.mp4?x-oss-process=video/snapshot,t_1,f_png,ar_auto,w_27'
					}, {
						img_url: 'https://vod.jukeyinqing.com/common/video/917c2e9c1b164668b68f060cd1faa723.mp4?x-oss-process=video/snapshot,t_1,f_png,ar_auto,w_27'
					}, {
						img_url: 'https://vod.jukeyinqing.com/common/video/4ec727de8dbd4094954d6a9cb2ad177b.mp4?x-oss-process=video/snapshot,t_1,f_png,ar_auto,w_27'
					}],
					propsList: [{
						label: '解说音频',
						value: '-'
					}, {
						label: '背景音乐',
						value: 'I Love You 3000 II'
					}]
				},{
					name: 'zhinengjianji_1627773599',
					bg_img: "https://vod.jukeyinqing.com/ims_output/videos/201/1672306227891519_201.mp4?x-oss-process=video/snapshot,t_1,f_png,m_fast,ar_auto,w_300",
					labelList: [{
						name: '推荐',
						color: 'orange'
					}, {
						name: '差异度大',
						color: 'blue'
					}, {
						name: '完全不重复',
						color: 'purple'
					}],
					sceneList: [{
						img_url: 'https://vod.jukeyinqing.com/s/20231204/material/mpmsjJ/png/e41bca63cdf868aa8db38bd35a796c18.png?x-oss-process=image/crop,x_597,y_0,w_608,h_1080/resize,w_27,limit_0'
					}, {
						img_url: 'https://vod.jukeyinqing.com/common/video/4ec727de8dbd4094954d6a9cb2ad177b.mp4?x-oss-process=video/snapshot,t_1,f_png,ar_auto,w_27'
					}, {
						img_url: 'https://vod.jukeyinqing.com/common/video/12a40b77e45a407ea9334bb5f5edc4ec.mp4?x-oss-process=video/snapshot,t_1,f_png,ar_auto,w_27'
					}, {
						img_url: 'https://vod.jukeyinqing.com/common/video/917c2e9c1b164668b68f060cd1faa723.mp4?x-oss-process=video/snapshot,t_1,f_png,ar_auto,w_27'
					}, {
						img_url: 'https://vod.jukeyinqing.com/common/video/4ec727de8dbd4094954d6a9cb2ad177b.mp4?x-oss-process=video/snapshot,t_1,f_png,ar_auto,w_27'
					}],
					propsList: [{
						label: '解说音频',
						value: '-'
					}, {
						label: '背景音乐',
						value: 'I Love You 3000 II'
					}]
				},{
					name: 'zhinengjianji_1627773599',
					bg_img: "https://vod.jukeyinqing.com/ims_output/videos/201/1672306228619945_201.mp4?x-oss-process=video/snapshot,t_1,f_png,m_fast,ar_auto,w_300",
					labelList: [{
						name: '推荐',
						color: 'orange'
					}, {
						name: '差异度大',
						color: 'blue'
					}, {
						name: '完全不重复',
						color: 'purple'
					}],
					sceneList: [{
						img_url: 'https://vod.jukeyinqing.com/s/20231204/material/mpmsjJ/png/e41bca63cdf868aa8db38bd35a796c18.png?x-oss-process=image/crop,x_597,y_0,w_608,h_1080/resize,w_27,limit_0'
					}, {
						img_url: 'https://vod.jukeyinqing.com/common/video/4ec727de8dbd4094954d6a9cb2ad177b.mp4?x-oss-process=video/snapshot,t_1,f_png,ar_auto,w_27'
					}, {
						img_url: 'https://vod.jukeyinqing.com/common/video/12a40b77e45a407ea9334bb5f5edc4ec.mp4?x-oss-process=video/snapshot,t_1,f_png,ar_auto,w_27'
					}, {
						img_url: 'https://vod.jukeyinqing.com/common/video/917c2e9c1b164668b68f060cd1faa723.mp4?x-oss-process=video/snapshot,t_1,f_png,ar_auto,w_27'
					}, {
						img_url: 'https://vod.jukeyinqing.com/common/video/4ec727de8dbd4094954d6a9cb2ad177b.mp4?x-oss-process=video/snapshot,t_1,f_png,ar_auto,w_27'
					}],
					propsList: [{
						label: '解说音频',
						value: '-'
					}, {
						label: '背景音乐',
						value: 'I Love You 3000 II'
					}]
				},{
					name: 'zhinengjianji_1627773599',
					bg_img: "https://vod.jukeyinqing.com/ims_output/videos/201/1672306228872511_201.mp4?x-oss-process=video/snapshot,t_1,f_png,m_fast,ar_auto,w_300",
					labelList: [{
						name: '推荐',
						color: 'orange'
					}, {
						name: '差异度大',
						color: 'blue'
					}, {
						name: '完全不重复',
						color: 'purple'
					}],
					sceneList: [{
						img_url: 'https://vod.jukeyinqing.com/s/20231204/material/mpmsjJ/png/e41bca63cdf868aa8db38bd35a796c18.png?x-oss-process=image/crop,x_597,y_0,w_608,h_1080/resize,w_27,limit_0'
					}, {
						img_url: 'https://vod.jukeyinqing.com/common/video/4ec727de8dbd4094954d6a9cb2ad177b.mp4?x-oss-process=video/snapshot,t_1,f_png,ar_auto,w_27'
					}, {
						img_url: 'https://vod.jukeyinqing.com/common/video/12a40b77e45a407ea9334bb5f5edc4ec.mp4?x-oss-process=video/snapshot,t_1,f_png,ar_auto,w_27'
					}, {
						img_url: 'https://vod.jukeyinqing.com/common/video/917c2e9c1b164668b68f060cd1faa723.mp4?x-oss-process=video/snapshot,t_1,f_png,ar_auto,w_27'
					}, {
						img_url: 'https://vod.jukeyinqing.com/common/video/4ec727de8dbd4094954d6a9cb2ad177b.mp4?x-oss-process=video/snapshot,t_1,f_png,ar_auto,w_27'
					}],
					propsList: [{
						label: '解说音频',
						value: '-'
					}, {
						label: '背景音乐',
						value: 'I Love You 3000 II'
					}]
				}]
			})
			return {
				...toRefs(state)
			}
		}
	})
</script>

<style lang="less" scoped>
	.result_list {
		width: 100%;
		height: 100%;
		padding: 10px;
		overflow-y: scroll;
		display: flex;
		flex-wrap: wrap;
		&::-webkit-scrollbar {
			width: 6px;
		}

		&::-webkit-scrollbar-track {
			width: 5px;
			background-color: transparent;
			-webkit-border-radius: 4px;
			-moz-border-radius: 4px;
			border-radius: 4px;
		}

		&::-webkit-scrollbar-thumb {
			background-color: rgba(193, 193, 193, 0.5);
			background-clip: padding-box;
			min-height: 28px;
			-webkit-border-radius: 4px;
			-moz-border-radius: 4px;
			border-radius: 4px;
		}

		.video_item {
			width: 296px;
			margin-left: 10px;
			margin-top: 10px;
			.top_con {
				width: 100%;
				height: 526px;
				position: relative;
				// background-image: url('https://vod.jukeyinqing.com/ims_output/videos/201/1672306216743559_201.mp4?x-oss-process=video/snapshot,t_1,f_png,m_fast,ar_auto,w_300');
				background-size: 100% 100%;
				background-repeat: no-repeat;
				.operate_con {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 20px;
					position: absolute;
					left: 0;
					top: 0;
					.left_check{
						color: #fff;
					}
					.right_duration{
						color: #fff;
					}
				}

				.composition_con {
					position: absolute;
					left: 0;
					bottom: 0;
					width: 100%;
					padding: 20px;
					background-color: rgba(0, 0, 0, .5);

					.back_con {
						display: flex;
						align-items: center;
						transform: translateX(-5px);
						.back_item {
							width: 45px;
							height: 70px;
							margin-left: 5px;
							img {
								width: 45px;
								height: 70px;
							}
						}

					}

					.desc_con {
						margin-top: 5px;
						.desc_item {
							display: flex;
							align-items: center;

							.left_label {
								color: #fff;
							}

							.right_value {
								color: #fff;
							}
						}
					}
				}
			}

			.bottom_con {
				background-color: #fff;
				padding: 20px;
				.video_name {
					color: #333639;
					font-size: 14px;
				}

				.label_con {
					margin-top: 10px;
					display: flex;
					flex-wrap: wrap;
					.label_item {}
				}
			}
		}

	}
</style>